<template>
  <div id="detail">
    <el-row :gutter="10">
<!--      图片-->
      <el-col :span="8" style="text-align: center">
        <el-image
            :src="img"
            lazy
        >
          <template v-slot:placeholder>
            加载中<span class="dot">...</span>
          </template>
        </el-image>
      </el-col>
<!--      内容面板-->
      <el-col :span="16">
        <el-row class="detail-head" type="flex" align="middle">
          <el-col :span="23" :offset="1">
            <span style="color: white; font-size: 16px">商品详情</span>
          </el-col>
        </el-row>
        <div class="detail-pane">

          <!--        标题-->
          <el-row class="detail-row">
            <el-col :span="20" :offset="1">
              <div class="book-title">
                {{ title }}
              </div>
            </el-col>
          </el-row>
          <!--          类别-->
          <el-row type="flex" align="middle" class="detail-row">
            <el-col :span="2" :offset="1">
              <span class="label">类别</span>
            </el-col>
            <el-col :span="4">
              {{ category }}
            </el-col>
            <template v-if="average !== 0">
              <el-col :span="2">
                <span class="label">评分</span>
              </el-col>
              <el-col>
                <el-rate
                    :value="average"
                    disabled />
              </el-col>
            </template>
          </el-row>
          <el-row class="detail-row authors">
            <!--        作者-->
            <el-col :span="10" :offset="1">
              {{ author }} 著，{{ publisher }} 出版
            </el-col>
          </el-row>
          <!--        价格-->
          <el-row class="detail-row" type="flex" align="middle">
            <el-col :span="2" :offset="1">
              <span class="label">惊喜价</span>
            </el-col>
            <el-col :span="12">
              <span class="price">￥ {{ price.toFixed(2) }}</span>
            </el-col>
          </el-row>
<!--          计数器 购物车按钮 总价-->
          <el-row class="detail-row" type="flex" align="middle">
            <el-col :span="2" :offset="1">
              <span class="label">数量</span>
            </el-col>
            <el-col :span="6">
              <el-input-number controls-position="right" v-model="count" :min="1" label="商品数量" />
            </el-col>
            <el-col :span="6">
              <el-button type="primary" style="width: 100%" @click="addToCart">加入购物车</el-button>
            </el-col>
            <el-col :span="2" :offset="2"><span class="label">总价</span></el-col>
            <el-col :span="4"><span class="price">￥ {{ total.toFixed(2) }}</span></el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BookDetails",
  props: {
    id: Number,
    title: String,
    author: String,
    publisher: String,
    category: String,
    price: Number,
    average: Number,
    img: String
  },
  methods: {
    addToCart() {
      this.$emit("add-cart", {id: this.id, count: this.count})
    }
  },
  data() {
    return {
      count: 1
    }
  },
  computed: {
    total() {
      return this.count * this.price
    }
  }
}
</script>

<style scoped>
.book-title {
  font-weight: bold;
  font-size: 16pt;
}

.price {
  font-size: 22pt;
  color: red;
}

.detail-row:first-child {
  margin-top: 0;
}

.detail-row:last-child {
  padding-bottom: 20px;
}

.detail-row {
  margin-top: 20px;
  margin-bottom: 30px;
}

.detail-pane {
  background-color: #b3d8ff;
  /*padding-left: 20px;*/
  border-radius: 0 0 25px 25px;
}

.detail-head {
  background-color: #409eff;
  height: 40px;
  border-radius: 25px 25px 0 0;
}

.authors {
  color: #666;
}

.label {
  color: #777
}

</style>